<template>
  <div class="app" id="buIntegral">
    <merchantHeader/>
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="conres">
            <div class="ra">
              <h3>积分账户</h3>
            </div>
            <div class="yuansdj">
              <h5 style="margin:10px 0px 10px 35px">积分余额</h5>
              <div class="yuansdj_gai"></div>
              <div class="yuansdj_balance">
                <div>积分余额</div>
                <div>
                  <span style="color:#f06048">{{jif}}</span>积分
                </div>
              </div>
              <h5 style="margin:10px 0px 10px 35px">积分明细</h5>
              <div>
                <el-tabs type="border-card" style="width:90%;margin:0 auto">
                    <el-tab-pane label="近7天">
                        <el-table
                            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                            :data="tableData"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="date"
                            label="日期">
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="积分数额">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="积分来源">
                            </el-table-column>
                        </el-table>
                        <div class="feny">
                            <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="1000"
                            style="margin-top: 5px;">
                            </el-pagination>
                            第<el-input size="mini" style="width: 50px;"></el-input>页
                            <button style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;">跳转</button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="近30天">
                        <el-table
                            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                            :data="tableData"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="date"
                            label="日期">
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="积分数额">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="积分来源">
                            </el-table-column>
                        </el-table>
                        <div class="feny">
                            <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="1000"
                            style="margin-top: 5px;">
                            </el-pagination>
                            第<el-input size="mini" style="width: 50px;"></el-input>页
                            <button style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;">跳转</button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="近90天">
                        <el-table
                            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                            :data="tableData"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="date"
                            label="日期">
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="积分数额">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="积分来源">
                            </el-table-column>
                        </el-table>
                        <div class="feny">
                            <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="1000"
                            style="margin-top: 5px;">
                            </el-pagination>
                            第<el-input size="mini" style="width: 50px;"></el-input>页
                            <button style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;">跳转</button>
                        </div>
                    </el-tab-pane>
                </el-tabs>
              </div>
              <h5 style="margin:10px 0px 10px 35px">积分兑换</h5>
              <div class="boxs">
                  <div style="margin:10px 0px 20px 50px">
                    <div class="div_box">
                        <div style="box-sizing: border-box;padding-top: 15px;">免费体验1次</div>
                        <div>积分3000</div>  
                    </div>
                    <div class="div_box1" @click="dialogVisible=true">兑换</div>
                  </div>
                  <div style="margin:10px 0px 20px 30px">
                    <div class="div_box" style="background-image: linear-gradient(to top right, rgb(255,176,131) , rgb(245,200,138));">
                        <div style="box-sizing: border-box;padding-top: 15px;">免费体验2次</div>
                        <div>积分5000</div>  
                    </div>
                    <div class="div_box1">兑换</div>
                  </div>
                  <div style="margin:10px 0px 20px 30px">
                    <div class="div_box" style="background-image: linear-gradient(to top right, rgb(198,193,153) , rgb(229,201,184));">
                        <div style="box-sizing: border-box;padding-top: 15px;">免费体验3次</div>
                        <div>积分6000</div>  
                    </div>
                    <div class="div_box1">兑换</div>
                  </div> 
              </div>
            </div>
            <businessF />
          </div>
        </div>
      </div>
    </div>
    <Footer />
    <el-dialog
          :visible.sync="dialogVisible"
          width="500px"
          :before-close="handleClose">
          <div class="lheds">积分兑换</div>
          <div class="lbody">
            <h5 style="text-align:center;margin:15px 0px">免费体验活动1次</h5>
            <div>
              本次扣除积分: <span>3000积分</span>
            </div>
            <div>
              可使用积分积分: <span>3200积分</span>
            </div>
          </div>
          <el-button style="margin: 0 auto;display: block;" type="danger" @click="dialogVisible = false">确定兑换</el-button>
          <div style="height:15px"></div>
        </el-dialog>
  </div>
</template>
<script>
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessL from "@/components/businessL";
import businessF from "@/components/businessF";
export default {
  components: {
    merchantHeader,
    Footer,
    businessL,
    businessF
  },
  data() {
    return {
      colors: "#f56c6c",
      data: "88",
      jif: 3200,
      tableData: [{
          date: '2016-05-02',
          name: '+3000',
          address: '发起研讨会积分池扣除'
        }, {
          date: '2016-05-04',
          name: '-500',
          address: '本地体验积分支付'
        }],
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
  }
};
</script>
<style lang="stylus">
.app /deep/ .ist_l .ist_c li:nth-child(1) {
  background-color: #ff9381;
  width: 126px;
  height: 50px;
  display: block;
}
#buIntegral{


.back {
  background-color: #f06048;
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
  padding-bottom: 10px;
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff;
}
.conres .ra h3 {
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
  border-bottom: 1px solid #cecece;
  margin-top: 15px;
  padding-bottom: 10px;
}
.yuansdj_gai {
  width: 140px;
  margin-left: 107.5px;
  height: 12px;
  border-radius: 10px 10px 0px 0px;
  background-color: #5d4e90;
}
.yuansdj_balance {
  width: 155px;
  background-color: #7b69bc;
  height: 65px;
  border-radius: 10px;
  border: solid 1px #eb9595;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 100px;
  margin-bottom: 10px;
  color: white;
}
.feny{
  display: flex;
  line-height: 40px;
  justify-content: center;
  width: 70%;
  margin: 0 auto;
}
.boxs{
    display: flex;
}
.div_box{
    text-align: center;
    width: 120px;
    height: 70px;
    border-radius: 15px 15px 0px 0px;
    background-image: linear-gradient(to top right, rgb(232,152,152) , rgb(245,204,196));
}
.div_box1{
    width: 120px;
    text-align: center;
    background-color: rgb(240, 96, 72);
    color: white;
    padding: 5px 0px 5px 0px;
}
.el-dialog__header{
  padding: 0px !important;
}
.el-dialog__body{
  padding: 0px !important;
}
.lheds{
  width: 100%;
  height: 60px;
  background-color: rgb(240, 96, 72);
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
}
.lbody{
  width: 100%;
}
.lbody>div{
  width 180px
  margin 10px auto
}
}
</style>